import Tree from "./components/Tree";
import React, { useMemo, useState } from "react";
import Dialog from "@/components/DIalog";
import HeaderTool from "./components/HeaderTool";
import IconMap from "@/components/IconMap";
import { cn } from "@/utils/twMerge";
const data = {
  id: 0,
  label: "XXX股份有限公司",
  children: [
    {
      id: 1,
      label: "技术部",
      children: [
        {
          id: 4,
          label: "后端工程师",
        },
        {
          id: 5,
          label: "前端工程师",
        },
        {
          id: 6,
          label: "运维工程师",
        },
      ],
    },
    {
      id: 2,
      label: "人事部",
    },
    {
      id: 3,
      label: "销售部",
    },
  ],
};
//用不上
const addProps = (list: any) => {
  list.forEach((item: any) => {
    item.label = item.label + "111";
    item.id = item.id + "111";
    if (item.children && item.children.length) {
      addProps(item.children);
    }
  });
};

addProps(data.children);
function Department() {
  const [title, setTitle] = useState<string>("");
  const [dialogStatus, setDialogStatus] = useState<boolean>(false);

  const [dataSource, setDataSource] = useState(data);

  const titleElement = useMemo(() => {
    return (
      <div className="flex -mt-1  justify-between">
        <span>{title}</span>
        <span
          className={cn(
            "cursor-pointer mr-7 text-red-500",
            title === "创建部门" && "hidden"
          )}
          onClick={() => setDialogStatus(false)}
          title="关闭"
        >
          {IconMap.DeleteOutlined}
        </span>
      </div>
    );
  }, [title]);

  const getDepartmentDetail = (_: any, data: any) => {
    // console.log(data);
    setTitle(data.label);
    setDialogStatus(true);
  };
  const addHandle = () => {
    // console.log("addHandle");
    setTitle("创建部门");
    setDialogStatus(true);
  };

  return (
    <div className="w-full h-full bg-white p-4">
      <HeaderTool addHandle={addHandle}></HeaderTool>
      <Tree data={dataSource} getDepartmentDetail={getDepartmentDetail} />
      <Dialog
        title={titleElement}
        dialogStatus={dialogStatus}
        setDialogStatus={setDialogStatus}
        width={800}
        render={() => <div>123</div>}
      ></Dialog>
    </div>
  );
}

export default Department;
